<template>
    <view class="korgenlirim">
        <div class="tabTitle">
            <div :class="['item', {actived:tabIndex == 0}]" @click="setTabIndex(0)">
                <div class="text">كۆرگەنلىرىم</div>
                <div class="icon">
                    <text v-show="tabIndex != 0" class="cuIcon-attentionfavor"></text>
                    <text v-show="tabIndex == 0" class="cuIcon-attentionfavorfill"></text>
                </div>
            </div>
            <div :class="['item', {actived:tabIndex == 1}]" @click="setTabIndex(1)">
                <div class="text">ياقتۇرغانلىرىم</div>
                <div class="icon">
                    <text v-show="tabIndex != 1" class="cuIcon-favor"></text>
                    <text v-show="tabIndex == 1" class="cuIcon-favorfill"></text>
                </div>
            </div>
            <div class="item" @click="handleMore">
                <div class="bg">
                    <image class="img" src="/static/img/icon/kirish.svg" mode="widthFix"></image>
                </div>
                <div class="text">تېخىمۇ كۆپ</div>
            </div>
        </div>
        <div class="tabList">
            <gridList :isShowDesc="false" :isShowQisim="false" :list='list'></gridList>
        </div>
    </view>
</template>

<script>
    import {
        getListData
    } from '@/api/user.js'
    import gridList from '@/components/user/gridList.vue'
    export default {
        components: {
            gridList,
        },
        data() {
            return {
                tabIndex: 0,
                list: [],
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            async getList() {
                const res = await getListData()
                if (res) {
                    // console.log(res);
                    if (this.tabIndex == 0) {
                        this.list = res.data.data.myView
                        // console.log(this.list);
                    } else {
                        this.list = res.data.data.myLike.data
                        // console.log(this.list);
                    }
                } else {
                    uni.showToast({
                        title: '请求失败',
                        icon: 'error'
                    })
                }
            },
            setTabIndex(tabIndex) {
                this.tabIndex = tabIndex
                this.getList()
            },
            handleMore() {
                uni.navigateTo({
                    url: '/pages/list/index'
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .korgenlirim {
        padding: 12px 20px;

        .tabTitle {
            height: 50px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: space-between;

            .item {
                color: #999;
                display: flex;
                align-items: center;
                justify-content: center;

                &.actived {
                    color: #0081ff;
                }

                .icon {
                    font-size: 24px;
                    margin-left: 4px;
                }

                .bg {
                    width: 20px;
                    margin-right: 4px;
                    position: relative;
                    top: 2px;

                    .img {
                        display: block;
                        width: 100%;
                    }
                }


            }
        }
    }
</style>